<template>
    <el-container class="content">
        <el-main>
            <el-container class="white-block box full" v-loading="loading">
                <el-header :height="'auto'">
                    <breadcrumb :title="'健康打卡'" :noBack="true"></breadcrumb>
                    <div class="toolbar">
                        <div>
                            <el-input v-model="name" placeholder="请输入姓名、手机号" class="input"
                                      clearable></el-input>
                            <el-date-picker v-model="searchTime" type="date" placeholder="请选择关联时间"
                                            :editable="false">
                            </el-date-picker>
                            <el-button type="primary" @click="getList(1)">查询</el-button>
                        </div>
                        <div class="text-right">
                            <el-button @click="dataExport()">导出</el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="mt10">
                    <table-example ref="table" :data="tableData" :tableColumn="header"
                                   :slotColumns="slotColumns">
                        <template slot="operation" slot-scope="scope">
                            <div class="operation">
                                <el-link type="primary" :underline="false">查看详情</el-link>
                            </div>
                        </template>
                    </table-example>
                </el-main>
                <el-footer :height="'auto'" class="mt20">
                    <page :data="page" @jumpPage="getList"></page>
                </el-footer>
            </el-container>
        </el-main>
    </el-container>
</template>

<script>
    import tableExample from '../components/table'
    import page from '../components/pagination'
    import breadcrumb from '../components/breadcrumb'

    export default {
        data() {
            return {
                name: '', // 姓名
                searchTime: '',
                tableData: [
                    {
                        bedNo: '内二5',
                        name: '张三',
                        state: '未打卡',
                        phone: '133****1230',
                        status: '患者',
                        registerTime: '2020-05-01 13:32:00',
                        punchTime: '2020-05-01 13:32:00',
                        health: '有发烧、咳嗽、乏力、肌肉酸 痛、呼吸急促、腹泻等症状',
                        touch: '是',
                        touchPlace: '是'
                    },
                    {
                        bedNo: '内二5',
                        name: '李四',
                        state: '已打卡',
                        phone: '133****5621',
                        status: '陪护人员',
                        registerTime: '2020-05-01 13:32:00',
                        punchTime: '2020-05-01 13:32:00',
                        health: '健康',
                        touch: '否',
                        touchPlace: '否'
                    }
                ],
                header: [
                    {
                        prop: 'bedNo',
                        label: '床位号',
                        minWidth: '150',
                        align: 'center'
                    },
                    {
                        prop: 'name',
                        label: '患者姓名',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'state',
                        label: '打卡状态',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'punchTime',
                        label: '打卡时间',
                        align: 'center',
                        minWidth: '150'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        align: 'center',
                        minWidth: '150'
                    }
                    // {
                    //     prop: 'name',
                    //     label: '姓名',
                    //     minWidth: '100',
                    //     align: 'center'
                    // },
                    // {
                    //     prop: 'status',
                    //     label: '身份',
                    //     minWidth: '100',
                    //     align: 'center'
                    // },
                    // {
                    //     prop: 'phone',
                    //     label: '手机号',
                    //     minWidth: '100',
                    //     align: 'center'
                    // },
                    // {
                    //     prop: 'health',
                    //     label: '目前健康状态',
                    //     minWidth: '150',
                    //     align: 'center'
                    // },
                    // {
                    //     prop: 'touch',
                    //     label: '近14天，是否有接触过疑似或确诊的新型冠状 病毒感染的肺炎患者或密切接触者',
                    //     minWidth: '200',
                    //     align: 'center'
                    // },
                    // {
                    //     prop: 'touchPlace',
                    //     label: '所居住的楼道是否有确诊的新型冠状病 毒感染的肺炎患者或密切接触者',
                    //     align: 'center',
                    //     minWidth: '200'
                    // },
                    // {
                    //     prop: 'registerTime',
                    //     label: '填写时间',
                    //     align: 'center',
                    //     minWidth: '150'
                    // }
                ],
                slotColumns: ['operation'],
                page: {
                    current: 1,
                    pages: 2,
                    searchCount: true,
                    size: 15,
                    total: 2
                },
                index: 1,
                loading: false
            }
        },
        mounted() {
            // this.searchTime = this.$filter.timeFormat(null, 'YYYY-MM-DD HH:mm:ss')
            // this.getList()
        },
        methods: {
            // 获取列表数据
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/personnel/personnelManaPage', {
                    startTime: this.$filter.timeFormat(this.searchTime, 'YYYY-MM-DD'),
                    name: this.name,
                    type: this.ward,
                    current: this.index || 1,
                    size: 15
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            // 重置操作
            reset() {
                this.searchTime = this.$filter.timeFormat(null, 'YYYY-MM-DD HH:mm:ss')
                this.name = ''
                this.ward = ''
                this.getList(1)
            },
            // 导出表格
            dataExport() {
                window.open(location.origin + '/_api/reportPeoplePass/download', '_blank')
            },
            approval(row, type) {
                this.$http.post('/resumption/approval', {
                    id: row.id,
                    approvalResult: type
                }).then(result => {
                    this.getList()
                })
            }
        },
        components: {
            tableExample,
            page,
            breadcrumb
        }
    }
</script>

<style scoped lang="less">
    .content {
    }
</style>
